<template>
	<view style="height: 100vh;background: #F6F6F6;padding-bottom: 200rpx;">
		<view class="header" :style="{'height':statusBarHeight+'px'}">
			<view class="navon" :style="{'height':statusBarHeight+'px','padding-top':statusBarHeight1+'px'}">
				<view class="header-back" @click="goBack()">
					<i class="iconfont" style="font-size: 20px;">&#xe605</i>
				</view>
				<view class="hearder-content">
					服务设置
				</view>
			</view>
		</view>
		<view class="">
			<view class="content-bg" :style="{'top':statusBarHeight+'px'}">
				<view class="tabs">
					<u-tabs style="width: 100%;" @click="clickService" :list="tabList1" lineWidth="30"
						lineColor="#f56c6c" keyName="name" :activeStyle="{
					    color: '#303133',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					    color: '#606266',
					    transform: 'scale(1)'
					}" itemStyle="padding:0 40rpx; height: 34px;width:300rpx">
					</u-tabs>
				</view>

				<view class="con1">
					<view class="item" v-for="item,index in list" :key="index">
						<view class="left">
							<image class="icon-image" :src="rq.imgUrl(item.image)" mode=""></image>
						</view>
						<view class="right">
							<view class="r1">
								<view class="name">
									{{item.name}}
								</view>
								<view class="btn">
									<image @click="edit(item)" src="https://pw.qyang.cc/static/edit.png" mode=""
										style="display: block;width: 34rpx;height: 34rpx;margin-right: 20rpx;"></image>

									<u-switch activeColor="#84E28D" :value="item.is_open == 1" asyncChange
										@change="change($event,index)" size="20"></u-switch>
								</view>
							</view>
							<view class="r2">
								<view class="">
									我的定价
								</view>
								<view class="">
									{{item.price}}元/小时
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 编辑弹窗 -->
			<u-popup :show="showEdit" :round="10" mode="bottom" @close="() => { showEdit = false; }" :closeable='true'>
				<view class="confirmArrive">
					<view class="confirm">编辑</view>
					<view class="" style="padding: 0 50rpx;font-size: 30rpx;margin: 60rpx 0 20rpx 0;">
						我的定价（元/小时）
					</view>
					<view class="">
						<view class="writeOffMa">
							<u-input class="writeOffCon" type="digit" placeholder="请输入" v-model="model.price"></u-input>
						</view>
						<view class="lowPrice">
							最低{{currentItem.low}}元；默认{{currentItem.low}}元
						</view>
					</view>
					<view class="" style="padding: 0 50rpx;font-size: 30rpx;margin: 60rpx 0 20rpx 0;">
						服务说明
					</view>
					<view class="writeOffMa">
						<textarea v-model="model.describe" placeholder="请输入" maxlength="15"
							style="padding: 20rpx;height: 228rpx;"></textarea>
						<text class="count"
							style="color: #999999;position: absolute;bottom: 20rpx;right: 20rpx;">{{model.describe.length}}/15</text>

					</view>


					<view class="popBtn">
						<view class="cancelBtn" @click="() => { showEdit = false; }">
							取消
						</view>
						<view class=confirmBtn @click="confirmBtn">
							确认完成
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import index from '../../uni_modules/uview-ui';

	export default {

		data() {
			return {
				serviceDescription: "",
				showEdit: false,
				faceScore: 0,
				serviceScore: 0,
				techScore: 0,
				showSendEvaluate: true,
				showReceiveEvaluate: false,
				statusBarHeight: 0,
				statusBarHeight1: 0,
				titleBarHeight:0,

				tabList1: [{
						id: 1,
						status: 1,
						name: '已上架'
					},
					{
						id: 2,
						status: 2,
						name: '已下架'
					}
				],
				selectedIndex: -1,
				params:{
					page:1
				},
				model:{
					describe:''
				},
				currentItem:{},
				list:[]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef MP-WEIXIN
						this.statusBarHeight1 = uni.getMenuButtonBoundingClientRect().top;
						this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
						this.statusBarHeight = this.titleBarHeight + this.statusBarHeight1;
					// #endif	
					// #ifndef MP-WEIXIN
						this.statusBarHeight = res.statusBarHeight * 1 + 46;
						this.statusBarHeight1 = res.statusBarHeight;
					// #endif
				},
			});	
			// 设置默认选中索引为0，即“已上架”选项
			this.selectedIndex = 0;
			// 获取“已上架”选项对应的对象
			let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.params.daren_id = userInfo.id
			const selectedTab = this.tabList1[this.selectedIndex];
			// 调用clickService方法初始化serviceList1
			this.clickService(selectedTab);
		},
		methods: {
			getList(){
				this.rq.getData('daren/service',this.params).then(res=>{					
					res.data.map(item=>{
						item.status = this.params.type
					})
					this.list = res.data
				})
			},
			change(e,index){			
				if(this.list[index].price*1>0){
					this.rq.getData('daren/set',{service_id:this.list[index].service_id,status:e?1:2}).then(res=>{
						this.list[index].is_open = e?1:2
					})
				}else{
					if(e){
						if(this.list[index].price*1==0&&this.list[index].is_open==2){
							uni.showToast({
								title:'请设置服务金额后开启~',
								icon:'none'
							})
						}
					}else{
						this.rq.getData('daren/set',{service_id:this.list[index].service_id,status:e?1:2}).then(res=>{
							this.list[index].is_open = e?1:2
						})
					}
				}
				
			},
			goBack() {
				uni.navigateBack()
			},
			selectTab(index) {
				this.selectedIndex = index;
			},
			confirmBtn(){
				console.log('sdf',this.model)
				this.rq.getData('daren/set_price',this.model).then(res=>{
					uni.showToast({
						title:'修改完成~',
						icon:'none'
					})
					this.getList()
					this.showEdit = false
				})
			},
			edit(item){
				this.currentItem = item
				this.model.service_id = item.service_id
				this.model.describe = item.describe
				this.model.price = item.price?item.price:item.low
				this.showEdit = true				
			},
			clickService(event) {
				this.params.type = event.status
				this.params.page = 1
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lowPrice {
		font-size: 24rpx;
		color: #999;
		text-align: end;
		padding-right: 50rpx;
		margin-top: 20rpx;
	}

	.confirm {
		text-align: center;
		font-size: 30rpx;
		margin: 30rpx 0;

	}

	.writeOffMa {
		margin: 0 50rpx;
		background-color: #F6F6F6;
		border-radius: 14rpx;
		position: relative;


		.writeOffCon {
			border: none;
			height: 88rpx;

		}


	}

	.confirmArrive {
		height: 912rpx;
	}

	.popBtn {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
		position: absolute;
		bottom: 80rpx;

		.cancelBtn {
			width: 266rpx;
			height: 74rpx;
			line-height: 72rpx;
			text-align: center;
			background: #F7F7F7;
			border: 2rpx solid #F7F7F7;
			border-radius: 200rpx;
		}

		.confirmBtn {
			width: 266rpx;
			height: 74rpx;
			line-height: 72rpx;
			text-align: center;
			background: #FF5866;
			border: 2rpx solid #FF5866;
			border-radius: 200rpx;
			color: #fff;
		}
	}

	.con1 {
		margin: 20rpx auto;

		width: 700rpx;

		.item {
			padding: 20rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-bottom: 20rpx;

			.left {

				.icon-image {
					width: 66rpx;
					height: 66rpx;
				}
			}

			.right {
				width: 100%;
				margin-left: 20rpx;

				.r1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 50rpx;

					.name {
						font-family: 阿里巴巴普惠体 2.0;
						font-size: 32rpx;
						font-weight: normal;
						line-height: 16px;
						letter-spacing: 0px;

						color: #333333;
					}

					.btn {
						display: flex;
						align-items: center;

						.btn1 {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}

				.r2 {
					height: 84rpx;
					line-height: 84rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 540rpx;
					color: #FF7681;
					background: #FFEEEF;
					border: 2rpx solid #FF7681;
					padding: 0 20rpx;
					border-radius: 20rpx;
					margin: 20rpx 0;

					.text {
						font-family: 阿里巴巴普惠体;
						font-size: 12px;
						font-weight: normal;
						line-height: 12px;
						letter-spacing: 0px;

						color: #999999;

						.num {
							font-family: 阿里巴巴普惠体;
							font-size: 12px;
							font-weight: normal;
							line-height: 12px;
							letter-spacing: 0px;

							color: #FF7681;
						}
					}
				}
			}
		}

		.text1 {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;

			.input1 {
				display: flex;
				align-items: center;

				span {
					margin-left: 20rpx;
					color: #333333;
				}
			}
		}

		.text {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			color: #666666;
			display: flex;
			align-items: center;
			margin: 20rpx 0;

			.input {
				width: 17.95%;
				height: 21.82%;
				border-radius: 4px;
				opacity: 1;
				background: #F1F1F1;
				margin: 0 20rpx;
				text-align: center;

			}
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
	}

	.score {
		font-size: 32rpx;
		color: #333;
	}

	.totalScore {
		color: #FF7681;
		font-size: 28rpx;
	}

	.moreTitle {
		color: #666666;
		font-size: 28rpx;
	}

	.moreScore {
		display: flex;
		margin-top: 20rpx;
	}

	.tabs {

		background-color: #ffffff;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;

		.tabs-1 {
			display: flex;

			height: 50rpx;
			margin: 20rpx;
			align-items: center;
		}

		.tabs-2 {

			justify-content: center;
			align-items: center;
			display: flex;
			margin-right: 30rpx;
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #333333;
		}

		.tabs-2.active {
			position: relative;
			line-height: 15px;
			transition: all 0.3s ease;
			border-radius: 22px;
			opacity: 1;
			background: #FF7883;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			letter-spacing: 0px;
			font-variation-settings: "opsz" auto;
			color: #FFFFFF;
			padding: 0 10rpx;
			height: 100%;
		}

		.tabs-icon {
			position: absolute;
			right: 40rpx;
			font-size: 20px;
		}
	}

	.submitBtn {
		width: 700rpx;
		height: 74rpx;
		background: #FF5866;
		color: #fff;
		text-align: center;
		line-height: 71rpx;
		position: absolute;
		bottom: 600rpx;
		left: 27rpx;
		border-radius: 200rpx;
	}

	.evaluateTabAll {
		display: flex;
		margin: 30rpx 0;
	}

	.evaluateTab {
		margin-right: 20rpx;
		border: 2rpx solid #FF7681;
		border-radius: 34rpx;
		width: 132rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background-color: #FFEEEF;
		color: #FF7681;
		font-size: 26rpx;
	}

	.evaluateTab.active {
		color: #fff;
		background-color: #FF7681;
	}

	.content-bg {

		position: relative;
	}

	.content-tab {
		width: 660rpx;
		height: 272rpx;
		margin: 40rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.header {
		width: 100%;
		height: auto;
		display: table;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
		background-color: #fff;

		.header-back {
			margin-left: 10rpx;
			height: 13px;
			line-height: 13px;
			position: absolute;
			left: 0;
			color: #000;
		}

		.hearder-content {
			font-size: 16px;
			font-weight: normal;
			line-height: 28px;
			text-align: center;
			display: flex;
			align-items: center;
			letter-spacing: 0px;
			color: #000;
		}

		.navon {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0px;
			left: 0px;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
</style>